@import './mixin.scss';
@import '~/common/style/index.scss';
$badge-prefix-cls: #{$cui-prefix}-badge;
$number-prefix-cls: #{$cui-prefix}-scroll-number;

.#{$badge-prefix-cls} {
    position: relative;
    display: inline-block;
    line-height: 1;
    &-count {
        z-index: $zindex-badge;
        // min-width: $badge-height;
        height: $badge-height;
        padding: 0 6px;
        color: $badge-text-color;
        font-weight: $badge-font-weight;
        font-size: $badge-font-size;
        line-height: $badge-height;
        white-space: nowrap;
        text-align: center;
        background: $badge-color;
        border-radius: calc($badge-height / 2);
        // box-shadow: 0 0 0 1px $shadow-color-inverse;
        overflow: hidden;
        a,
        a:hover {
          color: $badge-text-color;
        }
    }

    &-count-sm {
        min-width: $badge-height-sm;
        height: $badge-height-sm;
        padding: 0;
        font-size: $badge-font-size-sm;
        line-height: $badge-height-sm;
        border-radius: calc($badge-height-sm / 2);
    }

    &-multiple-words {
        padding: 0 8px;
    }

    &-dot {
        z-index: $zindex-badge;
        width: $badge-dot-size;
        min-width: $badge-dot-size;
        height: $badge-dot-size;
        background: $highlight-color;
        border-radius: 100%;
        // box-shadow: 0 0 0 1px $shadow-color-inverse;
    }

    &-dot.#{$number-prefix-cls} {
        transition: background 1.5s;
    }

    &-count,
    &-dot,
    .#{$number-prefix-cls}-custom-component {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -50%);
        transform-origin: 100% 0%;

        // &.#{$iconfont-css-prefix}-spin {
        // animation: antBadgeLoadingCircle 1s infinite linear;
        // }
    }

    &-zoom-appear,
    &-zoom-enter {
        animation: cuiZoomBadgeIn $animation-duration-slow $ease-out-back;
        animation-fill-mode: both;
    }

    &-zoom-leave {
        animation: cuiZoomBadgeOut $animation-duration-slow $ease-in-back;
        animation-fill-mode: both;
    }

    &-not-a-wrapper {
        .#{$badge-prefix-cls}-zoom-appear,
        .#{$badge-prefix-cls}-zoom-enter {
          animation: cuiNoWrapperZoomBadgeIn $animation-duration-slow $ease-out-back;
        }
    
        .#{$badge-prefix-cls}-zoom-leave {
          animation: cuiNoWrapperZoomBadgeOut $animation-duration-slow $ease-in-back;
        }
    
        &:not(.#{$badge-prefix-cls}-status) {
          vertical-align: middle;
        }
    
        .#{$number-prefix-cls}-custom-component,
        .#{$badge-prefix-cls}-count {
          transform: none;
        }
    
        .#{$number-prefix-cls}-custom-component,
        .#{$number-prefix-cls} {
          position: relative;
          top: auto;
          display: block;
          transform-origin: 50% 50%;
        }
      }

}
.#{$number-prefix-cls}{
  &-only{
    width: 8px;
    display: inline-block;
  }
}
@keyframes cuiZoomBadgeIn {
    0% {
      transform: scale(0) translate(50%, -50%);
      opacity: 0;
    }
  
    100% {
      transform: scale(1) translate(50%, -50%);
    }
  }
  
@keyframes cuiZoomBadgeOut {
    0% {
        transform: scale(1) translate(50%, -50%);
    }

    100% {
        transform: scale(0) translate(50%, -50%);
        opacity: 0;
    }
}

@keyframes cuiNoWrapperZoomBadgeIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
  
    100% {
      transform: scale(1);
    }
}
  
@keyframes cuiNoWrapperZoomBadgeOut {
    0% {
      transform: scale(1);
    }
  
    100% {
      transform: scale(0);
      opacity: 0;
    }
}